import Charts from "./js/utils.js";

export default {
    props: {
        // chart 名称
        name: {
            default: "line chart"
        },
        // chart 类型
        type: {
            default: "pie"
        },
        // chart 样式前缀
        classPrefix: {
            default: "hos-icon"
        },
        // chart 尺寸
        width: {
            default: 300,
        },
        // chart 尺寸
        height: {
            default: 300,
        },
        // chart 颜色
        color: {
            default: "#333333"
        },
        // chart 背景颜色
        backgroundColor: {
            default: "#FFFFFF"
        },
        // chart 图标禁用
        disabled: {
            default: false
        },
        // chart 自定义绑定数据
        dataClick:{
            default: null
        }
    },
    data: {
        id: "",
        ref: "",
        showIcon: false,
        // 防止重复绘制
        isReady: false,
        area: ["上海,750","杭州,425","苏州,960","南京,700","广州,800","厦门,975","北京,375","沈阳,775","泉州,100","哈尔滨,200"],
        pieData: [10, 25, 35, 30]
    },
    // 初始化自定义组件
    onInit() {

        this.$watch('propStr', 'onPropertyChange');
    },

    // 自定义组件布局完成
    onLayoutReady() {
        // 如果已经绘制完成不就不需要重复绘制
//        if (!this.isReady) {
//            this.drawCharts();
//        }
        this.drawCharts();

    },
    computed: {
        chartClass() {
            let classes = [];
            let preClass = "";
            let classPrefix = this.classPrefix;
            let name = this.name;
            let type = this.type;

            if (classPrefix && typeof classPrefix == "string") {
                // classes.push(classPrefix);
                preClass = classPrefix + "-" + type +'-';
            }
            if (name && typeof name == "string") {
                preClass = preClass + name
                classes.push(preClass);
            }
            return classes.join(" ");
        },
        propStr() {
            return `${this.name}_${this.type}_${this.classPrefix}_${this.width}_${this.height}_${this.color}_${this.backgroundColor}_${this.disabled}`;
        }
    },

    // 监听props的变化来重绘icon
    onPropertyChange(newV, oldV) {
//        if (newV !== oldV) {
//            this.showIcon = false;
//            this.drawCharts();
//        }
        this.drawCharts();
    },

    // 绘制图表
    drawCharts() {
        this.isReady = false;
        this.showIcon = true;
        const canvas = this.$refs["wx-charts"];
        const ctx = canvas.getContext("2d", {
            antialias: true
        });

        if (ctx) {
            // 下一次绘制之前清除画布
            ctx.clearRect(0, 0, this.width, this.height);
            if('pie' == this.type){
                Charts({
                    type: this.type,
                    data: this.pieData,
                    colors: ["#7158ec", "#fec312", "#1db2f4", "#ff3444"],
                    ctx: ctx,
                    point: {
                        x: 100,
                        y: 100
                    },
                    radius : 50
                });
            }
            if('ring' == this.type){
                Charts({
                    type: this.type,
                    data: [10, 25, 35, 30],
                    colors: ["#7158ec", "#fec312", "#1db2f4", "#ff3444"],
                    ctx: ctx,
                    point: {
                        x: 100,
                        y: 100
                    },
                    radius : 50
                });
            }
            if('bar' == this.type){
                Charts({
                    type: this.type,
                    data: this.area,
                    bgColors: "#46a2ef",
                    color: '#383838',
                    cHeight: 300,//表格高度
                    cWidth: 500,//表格宽度
                    bWidth: 22,//柱子宽度
                    bMargin: 16,//柱子间距
                    showYAxis: false,//是否显示Y轴
                    xCaption: '已成交客户地域分布',
                    yCaption: '地域成交数',
                    ctx: ctx,
                });
            }
        }
    },
    // 图标点击事件
    onclick(){
        if(!this.disabled){
            this.$emit("click", this.dataClick)
        }
    }
}